<template>
  <div class="nav_div">
    <div class="logo_div">
      <img :src="logoImg" alt="">
    </div>
    <div class="nav_right">
      <el-dropdown  @command="set_btn" trigger="click">
        <i class="el-icon-setting" style="margin-right: 15px;cursor:pointer;"></i>
        <el-dropdown-menu slot="dropdown" >
          <el-dropdown-item command="login">登录</el-dropdown-item>
          <el-dropdown-item command="register">注册</el-dropdown-item>
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>{{curTeaName}}</span>
    </div>


    <el-dialog title="登录" :visible.sync="loginDialogVisible" width="500px" class="login-dialog">
      <el-form :model="loginInfo" label-width="100px">
        <el-form-item label="工号" label-width="120px" class="nav-form-item">
          <el-input v-model="loginInfo.teaNumber" ></el-input>
        </el-form-item>
        <el-form-item label="密码" label-width="120px" class="nav-form-item">
          <el-input v-model="loginInfo.password"  placeholder="请输入密码" show-password></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer login-dialog-footer">
        <el-button @click="loginDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="login">确 定</el-button>
      </div>
  </el-dialog>

    <el-dialog :visible.sync="registerDialogVisible" width="500px" style="text-align: start;">
              <el-form :model="registerInfo" 
              :ref="registerInfo" 
              label-width="130px" 
              :rules="registerRules">

                <el-form-item label="姓名：" class="user-item" prop="teaName">
                    <el-input v-model="registerInfo.teaName" placeholder="请输入姓名"></el-input>
                </el-form-item>

                <el-form-item label="性别：" class="user-item" prop="teaGender">
                    <el-radio v-model="registerInfo.teaGender" label="男"></el-radio>
                    <el-radio v-model="registerInfo.teaGender" label="女"></el-radio>
                </el-form-item>

                <el-form-item label="密码：" class="user-item" prop="teaPassword">
                  <el-input v-model="registerInfo.teaPassword"  placeholder="请输入密码" show-password></el-input>
                </el-form-item>

                <el-form-item label="重复输入密码：" class="user-item" prop="rePassword">
                  <el-input v-model="registerInfo.rePassword"  placeholder="请输入密码" show-password></el-input>
                </el-form-item>

                <el-form-item label="工号：" class="user-item" prop="teaNumber">
                    <el-input v-model="registerInfo.teaNumber" placeholder="请输入您的工号"></el-input>
                </el-form-item>

                <el-form-item label="邮箱：" class="user-item" prop="teaEmail">
                    <el-input v-model="registerInfo.teaEmail" placeholder="请输入邮箱"></el-input>
                </el-form-item>

                <el-form-item label="手机号：" class="user-item" prop="teaPhone">
                    <el-input v-model="registerInfo.teaPhone" placeholder="请输入手机号"></el-input>
                </el-form-item>

              </el-form>
              
            <div slot="footer" class="dialog-footer login-dialog-footer">
              <el-button @click="registerDialogVisible = false">取 消</el-button>
              <el-button type="primary" @click="registerTheacher">注册</el-button>
            </div>
  </el-dialog>


  </div>
  
</template>

<script>
import { Storage } from "@/storage";
import * as API from '../api/user/index'
import Bus from '../utils/bus'

export default {
  props:[
    'curTeaName'
  ],
  data() {
    return {
      logoImg:require("../../public/img/logo1.png"),
      loginDialogVisible: false,
      registerDialogVisible: false,
      loginInfo:{
        teaNumber:"",
        password:"",
      },
      registerInfo: {
        teaName:'',
        teaNumber:'',
        teaPhone:'',
        teaEmail:'',
        teaGender:'',
        teaPassword:'',
        rePassword:''
      },
      registerRules:{
          teaNumber:[ { required: true, message: '请输入您的工号', trigger: 'blur' }],
          teaPassword:[ { required: true, message: '请输入密码', trigger: 'blur' }],
          rePassword:[ { required: true, message: '请重复输入密码', trigger: 'blur' }],
          teaEmail:[ { required: true, type:'email', message: '请输入正确的邮箱', trigger: 'blur' }],
          teaPhone:[ { required: true, message: '请输入手机号', trigger: 'blur' }],
          teaName:[ { required: true, message: '请输入姓名', trigger: 'blur' }],
          teaGender:[ { required: true, message: '请选择性别', trigger: 'blur' }]
      }
    }
  },
  methods: {
    login() {
      this.loginDialogVisible = false
      
      API.login(this.loginInfo.teaNumber, this.loginInfo.password)
      .then(res => {
        if(res.code === 100) {
            this.$message({
                showClose: true,
                message: res.data.error,
                type: 'error'
            });
            return
        }
        let data = res.data
        //token有效期为24小时 24 * 60 * 60 * 1000
        Storage.set("nothing-token",data.token, 24 * 60 * 60 * 1000)
        Storage.set("tea", data.tea, 24 * 60 * 60 * 1000)
        this.$message({
            showClose: true,
            message: "登录成功",
            type: 'success'
        });
        this.$emit("successLogin", true)
        Bus.$emit("isLogin", true)

      }).catch(err => {
        this.$message({
            showClose: true,
            message: '网络错误，或者服务器宕机, error:' +  err,
            type: 'error'
        });
      })

    },
    set_btn(command) {

      switch(command) {
        case 'login':
          this.loginDialogVisible = true
          break
        case 'register':
          this.registerDialogVisible = true
          break
        case 'logout':
          break
      }
    },
    checkLoginStatus() {
        let token = Storage.get("nothing-token")
        let storage_teaInfo = Storage.get("tea")
        if(token == null || token == '') {
          this.$message({
                        showClose: true,
                        message: '当前登录状态已过期，请重新登录',
                        type: 'error'
          });
          this.curTeaName = ''
        }else {
          this.curTeaName = storage_teaInfo.teaName
        }
    },
    registerTheacher() {
      if(this.registerInfo.teaPassword != this.registerInfo.rePassword) {
        this.$message.error("两次密码不一致")
        return
      }
      this.registerDialogVisible = false
      
      API.registerTea(this.registerInfo).then(res => {
        if(res.code === 100) {
            this.$message({
                showClose: true,
                message: res.data.error,
                type: 'error'
            });
            return
        }
        let data = res.data
        //token有效期为24小时 24 * 60 * 60 * 1000
        Storage.set("nothing-token",data.token, 24 * 60 * 60 * 1000)
        Storage.set("tea", data.tea, 24 * 60 * 60 * 1000)
        this.$message({
            showClose: true,
            message: "登录成功",
            type: 'success'
        });
        this.$emit("successLogin", true)
        Bus.$emit("isLogin", true)

      }).catch(err => {
        this.$message({
            showClose: true,
            message: '网络错误，或者服务器宕机, error:' +  err,
            type: 'error'
        });
      })
      
    }

  },

}
</script>

<style>
.nav_div {
  display: flex;
  justify-content:space-between;
}

.logo_div {
  margin-top: 10px;
  margin-left: 0.5%;
  width: 20px;
  height: 20px;
  align-self: flex-start;

}

.logo_div > img {
  width: 120px;
  height: 40px;
}

.nav_right {
  display: flex;
  /* align-self: flex-end; */
}

.el-header {
  /* background-color: rgb(238, 241, 246); */
  /* background-color: white; */
  /* border-bottom: 1px solid #000; */
  color: #333;
  line-height: 60px;
  box-shadow: 0 2px 12px 0px rgb(0 0 0 / 8%);
}

.nav-form-item {
  width: 400px;
}

.login-dialog {
  text-align: center;
  padding-left: -15%;
}

.login-dialog-footer {
  display: flex;
  justify-content: center;;
}

</style>